<template>
    <div>
      <BarChart ref="barChart" :seriesData="barChartData" :option="barChartOption" height="12vh"/>
      <div>
            <div class="header">
                <span class="tableColumn">{{$t('confinedSpace.global.name')}}</span>
                <span class="tableColumn status">{{$t('confinedSpace.global.connection')}}</span>
            </div>
            <div 
                class="list-carousel" 
                ref="listContainer" 
                @mouseover="pauseScroll" 
                @mouseleave="resumeScroll"
            >
                <div class="outsidelist" ref="messageWrapper" :class="{'scroll':animate}">
                  <div class="list" v-for="item in displayedData" :key="item.id" >
                      <span class="tableColumn">{{ item.name }}</span>
                      <span :class="[item.connection === 1 ? 'success' : 'wait','tableColumn','status']">
                      {{ item.connection === 1 ? $t('confinedSpace.global.online') : $t('confinedSpace.global.offline') }}
                      </span>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import BarChart from '@/components/Chart/BarChart'
import visual from './visual'
export default {
  name: 'online',
  mixins: [visual],
  props:{
    dataSource: {
        type:Object,
        default: () => {}
    }
  },
  components: {
    BarChart
  },
  data () {
    return {
        date:'day',
        listData:[
            {
                name:'设备1',
                connection:1,
            },
            {
                name:'设备2',
                connection:0,
            },
            {
                name:'设备3',
                connection:0,
            },
            {
                name:'设备4',
                connection:0,
            },
            {
                name:'设备5',
                connection:0,
            },
            // {"name":"last-cs","connection":1}
        ],
        scrollPosition: 0,
        scrollSpeed: 2, // 控制滚动速度
        scrollInterval: null,
        animate:false
    }
  },
  computed: {
    displayedData() {
        if(!this.dataSource.list || (this.dataSource.list && this.dataSource.list.length === 0)) return []
        return [...this.dataSource.list]; // 复制数据以实现无缝滚动
    }
  },
  created(){
  },
  watch: {
    dataSource: {
      handler:function(newVal,oldVal) {
        console.log(newVal)
        if(!newVal.list || (newVal.list && newVal.list.length === 0)) return
        this.barChartData[0].data[0] = newVal.online
        this.barChartData[0].data[1] = newVal.offline
        this.$nextTick(() => {
            this.listScroll();
            this.$refs.barChart.init()
        })
      },
      immediate: true,
      deep: true
    }
  },
    methods: {
        listScroll() {
            clearInterval(this.scrollInterval);
            this.scrollInterval = setInterval(() =>{
                if (this.displayedData.length >= 3) {
                    this.animate = true
                    setTimeout(() => {
                        this.displayedData.push(this.displayedData[0]);
                        this.displayedData.shift();
                        this.animate = false; 
                    }, 500)
                }
            }, 2000)
        },
        pauseScroll() {
            clearInterval(this.scrollInterval);
        },
        resumeScroll() {
            this.listScroll();
        }
    },
    beforeDestroy() {
        clearInterval(this.scrollInterval);
    }
}
</script>
<style lang="scss" scoped>
.bg_radio {
    display: flex;
    .el-radio-button--small {
        text-align: center;
        margin-right: 15px;
    }
    :deep(.el-radio-button__inner) {
        font-size: 14px;
        padding: 4px 12px;
        border: none !important;
        border-radius: 3px;
        background: rgba(33, 98, 164, 0.2);
        box-shadow: none;
        color: #000;
    }
    .is-active {
        background: #2162A4;
        :deep(.el-radio-button__inner){
            color: #fff;
        }
    }
}
.header{
    background: linear-gradient(90deg, #C4DCF5 0%, rgba(196, 220, 245, 0) 100%);
    border-radius: 5px;
    border-radius: 5px;
    padding: 0.26vw 0.78vw;
    font-size: 0.78vw;
}
.list-carousel {
  height: 13.7vh;
  position: relative;
  overflow: hidden;
}
.outsidelist{
    position: relative; 
    // transition: top 0.5s;
}
.scroll{
    transition: transform 0.5s linear;
    transform: translateY(-3.69vh)
}
.list{
    padding: 0 0.78vw;
    line-height: 3.69vh;
    font-size: 0.834vw;
    display: flex;
    align-items: center;
}
.tableColumn{
    width: 50%;
    display: inline-block;
    &.status{
        padding-left: 12px;
        width: 50%;
    }
}
.wait{
    position: relative;
    // color:#EB7B07FF;
    &::after{
        content: '';
        position: absolute;
        width: 0.32vw;
        height: 0.32vw;
        background: #EAD408;
        border-radius: 50%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}
.success{
    @extend .wait;
    // color:#38C914;
    &::after{
     background: #38C914;   
    }
}
</style>